<template>
  <div class="login-box">
    <div class="login-content">
      <div class="wlc">
        <span>你好，</span>
        <span>欢迎登录</span>
      </div>
      <div class="box">
        <input type="text" placeholder="请输入用户名" v-model="userId" />
      </div>
      <div class="box">
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
      <span class="zc" @click="goRegister">没有账号？立即注册</span>
      <van-checkbox
        class="remember"
        v-model="remember"
        shape="square"
        icon-size="16px"
        >记住账号？</van-checkbox
      >
      <van-checkbox v-model="checked" shape="square" icon-size="16px"
        >同意《用户协议》《隐私协议》</van-checkbox
      >
      <van-button :disabled="!checked" @click="loginEvt" color="#1989FA" block
        >登录</van-button
      >
      <em @click="codeEvt">手机验证码登录</em>
      <span class="right-info">kasjdhfwio技术支持 &copy;2022-</span>
    </div>
  </div>
</template>
<script>
import { passwordLoginApi } from "../../apis/loginApi";
import { MD5, AES, enc } from "crypto-js";
export default {
  data() {
    return {
      userId: "",
      password: "",
      checked: false,
      remember: false,
    };
  },
  created() {
    let myUserId = localStorage.getItem("my-user-id");
    if (myUserId) {
      this.remember = true;
      this.userId = AES.decrypt(myUserId, "123456").toString(enc.Utf8);
    }
  },
  methods: {
    async loginEvt() {
      if (this.userId === "") {
        this.$toast({
          message: "请输入用户名",
          position: "bottom",
        });
        return;
      }
      if (this.password === "") {
        this.$toast({
          message: "请输入密码",
          position: "bottom",
        });
        return;
      }

      let res = await passwordLoginApi({
        id: this.userId,
        password: MD5(this.password).toString(),
      });
      if (res.code !== 200) {
        this.$toast({
          message: "用户名或密码错误",
          position: "bottom",
        });
        return;
      }
      this.$store.commit("common/mutationUser", res.data);
      /** 判断是否记住账号 */
      if (this.remember) {
        localStorage.setItem(
          "my-user-id",
          AES.encrypt(this.userId, "123456").toString()
        );
       
      } else { 
          localStorage.removeItem("my-user-id");
      }
      this.$store.commit("common/mutationToken", res.data.token);
      this.$router.push("/index");
    },
    codeEvt() {
      this.$router.push("/login");
    },
    goRegister() {
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="less" scoped>
.rel() {
  display: block;
  position: relative;
  height: 100%;
}
.login-box {
  text-align: right;
  .rel();
  em {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #666;
    font-style: normal;
    margin-top: 50px;
  }
  .zc {
    font-size: 0.6rem;
    line-height: 32px;
  }
  .login-content {
    .rel();
    padding: 0 40px;
    .wlc {
      text-align: left;
      margin-top: 18vh;
      margin-bottom: 30px;
      span {
        display: block;
        font-weight: 600;
      }
    }
    .box {
      display: flex;
      width: 100%;
      position: relative;
      border-bottom: 2px solid #ccc;
      font-size: 0.7rem;

      input {
        flex: 1;
        border: none;
        padding: 10px 0 10px 10px;
        line-height: 32px;
      }
    }
    .box:nth-child(2) {
      border-bottom: 2px solid #fd3434;
    }
    .van-button {
      margin-top: 20px;
    }
    .van-checkbox {
      font-size: 0.6rem;
    }
    .remember {
      margin-bottom: 8px;
    }
  }
  .right-info {
    display: block;
    position: absolute;
    bottom: 20px;
    width: 100%;
    font-size: 0.6rem;
    color: #aaa;
    text-align: center;
  }
}
</style>